.aboutMe {
	margin: 0 0 var(--gap-160) 0;
	padding: var(--gap-60) 0;
}
.aboutTitle {
	margin: 0 0 6.25rem 0;
	text-align: center;
}
.wrapper {
	display: flex;
	margin-inline: auto;
	align-items: center;
	justify-content: center;
	gap: var(--gap-md);
}
.imgBox {
	border-right: 5px dashed var(--red-accent);
	border-top: 5px dashed var(--red-accent);
	order: -1;
}

.img {
	filter: brightness(90%) saturate(0%);
	padding: 0.625rem;

	transition: filter 0.2s ease-in-out;
}

.img:hover {
	filter: brightness(100%) saturate(100%);
}

.aboutText {
	display: flex;
	padding: var(--gap-md);
	flex-direction: column;
	gap: var(--gap-md);
	align-self: start;
	flex: 1;
	width: 100%;
	max-width: 60rem;
	height: 100%;
	min-height: 486px;
	background-color: var(--bg-clr-secondary);
	box-shadow: var(--box-shadow);
	border-radius: 4px;
}

.aboutTextItem {
	width: 100%;
}

.accent {
	font-family: var(--ff-heading);
	color: var(--accent-clr);
}
.titleAccent {
	color: var(--red-accent);
}

.skills {
	margin: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap-lg);
}

.skillsTitle {
	font-family: var(--ff-heading);
	font-size: var(--fs-main);
	color: var(--accent-clr);
}

.skillsWrapper {
	display: flex;
	gap: var(--gap-sm);
}

.skillsItem {
	font-size: var(--fs-sm);
	line-height: 1.1875rem;
	color: var(--text-clr-main);
	background-color: var(--red-accent);
	padding: var(--gap-sm) var(--gap-md);
	border-radius: 4px;
}

@media screen and (max-width: 1024px) {
	.wrapper {
		flex-direction: column;
		align-items: center;
	}
	.imgBox {
		border-right: none;
		border-top: none;
		border-bottom: 3px dashed var(--red-accent);
		border-left: 3px dashed var(--red-accent);
		margin: 0 0 var(--gap-lg) 0;
	}
	.aboutText {
		border: none;
	}
	.skillsWrapper {
		flex-wrap: wrap;
	}
	.skills {
		margin: var(--gap-lg) 0 0 0;
	}
}

@media screen and (max-width: 769px) {
	.aboutMe {
		margin: 0 0 var(--gap-xxxl) 0;
	}
	.wrapper {
		flex-direction: column;
		align-items: center;
	}
	.imgBox {
		border-right: none;
		border-top: none;
		border-bottom: 3px dashed var(--red-accent);
		border-left: 3px dashed var(--red-accent);
		margin: 0 0 var(--gap-lg) 0;
	}
	.aboutText {
		border: none;
	}
	.skillsTitle {
		text-align: center;
	}
	.skillsWrapper {
		flex-wrap: wrap;
		justify-content: center;
	}
}
